import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';


import { Icon, message, Button, Modal } from 'antd';

import './index.scss';

import EntryHeader from '../../components/EntryHeader';


@inject('homeStore')
@inject('baseStore')
@observer
class Home extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			exitModelShow: false
		};

		// 为了在回调中使用 `this`，这个绑定是必不可少的
		this.handleClick = this.handleClick.bind(this);
	}

	pageChangeNoticeToServer = () => {
		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: "/"
			}
		};

		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);
	}

	componentDidMount() {

		this.pageChangeNoticeToServer()

		this.props.baseStore.topHeader.show = false;
		this.props.baseStore.topHeader.title = "入口页";

		console.log(this.props.baseStore.socketData.header, "================this.props.baseStore.socketData.header=============");

	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	handleClick() {
		// alert(3);
	}


	closeApp = () => {
		NativeApp.exitApp();
	}

	showExitModal = () => {
		this.setState({
			exitModelShow: true,
		});
	};

	exitConfirm = e => {
		this.closeApp();
	};

	closeExitModal = e => {
		this.setState({
			exitModelShow: false,
		});
	};

	render() {
		return (
			<div className="HomePage page_container animated fadeInDown fast" style={{ height: '100%' }}>

				<EntryHeader />

				<div className="top_right_img"></div>
				<div className="bottom_left_img"></div>
				<div className="menu_container">
					{
						this.props.homeStore.entryList.map((item, index) => {
							return (
								<Link to={item.to} className="entry_each" key={index}>
									<img src={item.imgUrl} alt="" />
								</Link>
							)
						})
					}


				</div>

				<Modal
					title="提示"
					visible={this.state.exitModelShow}
					onOk={this.exitConfirm}
					onCancel={this.closeExitModal}
					okText="确认"
					cancelText="取消"
				>
					确定退出?
                </Modal>

			</div>
		);
	}
}

export default Home;